<template>
  <div class="I-VI-II">
    <table class="I-VI-II__table">
      <tr class="I-VI-II__table-trone">
        <td class="I-VI-II__table-trone-td"
            colspan="10">
          <div class="I-VI-II__table-trone-td-title">
            I-6-2 代表性毕业生
            <span class="I-VI-II__table-trone-td-title-tips">
              【机械工程、材料科学与工程、动力工程及工程热物理、电气工程、电子科学与技术、信息与通信工程、控制科学与工程、计算机科学与技术、土木工程、化学工程与技术、地质资源与地质工程、矿业工程、石油与天然气工程、纺织科学与工程、交通运输工程、航空宇航科学与技术、兵器科学与技术学科限30人，生物工程、网络空间安全学科限10人，其他学科限20人】
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-VI-II__table-th">
        <td class="I-VI-II__table-th-tdone"
            rowspan="2">
          序号
        </td>
        <td class="I-VI-II__table-th-tdtwo"
            rowspan="2">
          姓名（年龄，学位类<br>型，学习方式）
        </td>
        <td class="I-VI-II__table-th-tdthree"
            rowspan="2">
          毕业<br>年度
        </td>
        <td class="I-VI-II__table-th-tdfour"
            colspan="3">
          学位授予单位及学科/专业
        </td>
        <td class="I-VI-II__table-th-tdfive"
            rowspan="2">
          工作单位（所在地，单位类型）及<br>行政级别/专业技术职务
        </td>
        <td class="I-VI-II__table-th-tdsix"
            rowspan="2">
          毕业生简介<br>
          <span class="I-VI-II__table-th-tdsix-tips">
            （限100字）
          </span>
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-VI-II__table-th-add-button"
                   circle
                   @click.prevent="addMaterList"/>
      </tr>
      <tr class="I-VI-II__table-thtwo">
        <td class="I-VI-II__table-thtwo-tdone">
          学士
        </td>
        <td class="I-VI-II__table-thtwo-tdtwo">
          硕士
        </td>
        <td class="I-VI-II__table-thtwo-tdthree">
          博士
        </td>
      </tr>
      <tr v-for="(item, index) in afbs"
          :key="index"
          class="I-VI-II__table-tr">
        <td class="I-VI-II__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-VI-II__table-tr-tdtwo">
          <el-input v-model="item.name"
                    autosize
                    class="I-VI-II__table-tr-tdtwo-input"
                    placeholder="李四（38岁，学术学位博士，全日制）"
                    type="textarea"/>
          <el-input v-model="item.age"
                    style="width:30px"
                    placeholder="年龄"
                    type="input"/>,
          <!-- <el-input v-model="item.degreeType"
                      placeholder="学位类型"
                      type="input"/> , -->
          <el-autocomplete  v-model="item.degreeType"
                            :popperAppendToBody="false"
                            :fetchSuggestions="querySearchAsync"
                            placeholder="学位类型"
                            style="width: 55px"
                            type="input"
                            @select="handleSelect"/>,
          <el-autocomplete  v-model="item.learnType"
                            :popperAppendToBody="false"
                            :fetchSuggestions="querySearchAsync"
                            style="width: 55px"
                            placeholder="学习方式"
                            type="input"
                            @select="handleSelect"/>
          <!-- </el-input> -->
        </td>
        <td class="I-VI-II__table-tr-tdthree">
          <el-input v-model="item.finishYear"
                    class="I-VI-II__table-tr-tdthree-input"
                    autosize
                    placeholder="2018"
                    type="textarea"/>
        </td>
        <td class="I-VI-II__table-tr-tdfour">
          <el-input v-model="item.bachelorInfo"
                    class="I-VI-II__table-tr-tdfour-input"
                    autosize
                    placeholder="XX大学，XX专业"
                    type="textarea"/>
        </td>
        <td class="I-VI-II__table-tr-tdfive">
          <el-input v-model="item.masterInfo"
                    class="I-VI-II__table-tr-tdfive-input"
                    autosize
                    placeholder="XX大学，XX学科"
                    type="textarea"/>
        </td>
        <td class="I-VI-II__table-tr-tdsix">
          <el-input v-model="item.doctorInfo"
                    class="I-VI-II__table-tr-tdsix-input"
                    autosize
                    placeholder="XX大学，XX学科"
                    type="textarea"/>
        </td>
        <td class="I-VI-II__table-tr-tdseven">
          <el-input v-model="item.workInfo"
                    class="I-VI-II__table-tr-tdseven-input"
                    placeholder="XX大学（XX省，教育科研单位），副高级"
                    autosize
                    type="textarea"/>
        </td>
        <td class="I-VI-II__table-tr-tdeight">
          <el-input v-model="item.introduction"
                    class="I-VI-II__table-tr-tdeight-input"
                    placeholder="请输入毕业生简介"
                    autosize
                    maxlength="100"
                    type="textarea"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-VI-II__table-tr-delete-button"
                   circle
                   @click.prevent="deleteMaterItem(index)"/>
      </tr>
    </table>
    <div class="I-VI-II__explain">
      <span class="I-VI-II__explain-strong">
        说明：①
      </span>
      本表填写2005年1月1日以后毕业（博士、硕士或本科至少一个学习阶段在本单位本学科）的优秀学生情况。
      <span class="I-VI-II__explain-strong">
        ②
      </span>
      “学习方式”限填“全日制、非全日制、同等学力”。
      <span class="I-VI-II__explain-strong">
        ③
      </span>
      “毕业年度”填写毕业生在本单位本学科获得最高学位的年度。
      <span class="I-VI-II__explain-strong">
        ④
      </span>
      “所在地”填写工作单位所在省、自治区、直辖市，境外单位填写所在国家（地区）。
      <span class="I-VI-II__explain-strong">
        ⑤
      </span>
      “单位类型”限填“党政及部队机关、教育科研单位、医疗卫生单位、其他事业单位、国有企业、民营及其他企业、其他类型单位”。
      <span class="I-VI-II__explain-strong">
        ⑥
      </span>
      “行政级别”限填“省部级正职、省部级副职、厅局级正职、厅局级副职、县处级正职、县处级副职、其他”，“专业技术职务”限填“正高级、副高级、其他”。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.afbs = await getPageData('afbs')
    loading.close()
    this.restaurants = this.loadAll()
  },
  watch: {
    afbs: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      afbs: [
        { name: '', age: '', degreeType: '', learnType: '', finishYear: '', bachelorInfo: '', masterInfo: '', doctorInfo: '', workInfo: '', introduction: '' }
      ]
    }
  },
  methods: {
    addMaterList () {
      this.afbs.push({ name: '', finishYear: '', bachelorInfo: '', masterInfo: '', doctorInfo: '', workInfo: '', introduction: '', contract: '', received: '' })
    },
    deleteMaterItem (index) {
      if (this.afbs.length > 1) {
        this.afbs.splice(index, 1)
      }
    },
    loadAll () {
      return [
        { value: '本科' },
        { value: '硕士' },
        { value: '博士' }
      ]
    },
    querySearchAsync (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
    }
  }
}

</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-6-2.less';
/deep/ .el-autocomplete-suggestion {
  width: auto !important;
}
</style>
